import { createApp } from 'vue'
import { createPinia } from 'pinia'
import 'vant/lib/index.css'
import './style.css'
import App from './App.vue'
import { Tabbar, 
    TabbarItem, 
    Search, Icon, 
    Loading, 
    Skeleton, 
    Swipe, 
    Tabs, 
    Tab, 
    Sticky, 
    NavBar,
    Form,
    CellGroup,
    Field,
    Button,
    ActionSheet,
    Sidebar,
    SidebarItem, } from 'vant'
import router from './router'
import './assets/main.css'
import './assets/common.scss'
import lazyPlugin from './directives/lazyLoading'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.use(Tabbar)
app.use(TabbarItem)
app.use(Search)
app.use(Icon)
app.use(Loading)
app.use(Skeleton)
app.use(Swipe)
app.use(Tabs)
app.use(Tab)
app.use(Sticky)
app.use(NavBar)
app.use(Form)
app.use(CellGroup)
app.use(Field)
app.use(Button)
app.use(ActionSheet)
app.use(Sidebar)
app.use(SidebarItem)
app.use(lazyPlugin)

const rootValue = 16
const rootWidth = 390
const deviceWidth = document.documentElement.clientWidth
document.documentElement.style.fontSize = (deviceWidth * rootValue) / rootWidth + 'px'

app.mount('#app')
